<template>
	<view class="reference"  style="display: flex; align-items: center; justify-content: center; height: 100vh;background-position:bottom; background-size: contain;background-repeat: no-repeat;" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/26bda6e679b96e28d8.png)'}" >
		<!-- <uni-popup ref="tree_popup" type="center" :mask-click="false" :animation="true"> -->
			<view class="tree_popup_view" style="background-color: #FFFBF6;">
				<!-- <image @tap="closepups" class="closeicon" :src="photo_cdn+'zpupload/static/icon/closeicon.png'" mode=""></image> -->
			<view class="index_heart_top" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/3ca9906e8f012aab0c.png)'}"></view>
			<!-- <view class="index_heart_bottom" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240102/3ca9906e8f012aab0c.png)'}"></view> -->
			
				<view v-if="signal==1" class="operation">
					<view class="lable_cell_items">
						<view class="lable_names">爷爷姓名</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="grandpa_name"
								placeholder="请输入爷爷姓名"></input>
						</view>
					</view>
					<view class="lable_cell_items">
						<view class="lable_names">父亲姓名</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="parent_name"
								placeholder="请输入父亲姓名"></input>
						</view>
					</view>
					<view class="lable_cell_items">
						<view class="lable_names">您的姓名</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="name"
								placeholder="请输入您的姓名"></input>
						</view>
					</view>
					<view class="lable_cell_items">
						<view class="lable_names">激活码</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="card_number"
								placeholder="请输入激活码"></input>
						</view>
					</view>
					<view class="sub_footbtn" @tap="reference">
						<view class="sub_button">确认查询</view>
					</view>
				</view>
		
				<view v-if="signal==2" class="operation_a">
					<view v-if="claim_info.length" class="operation_title">请确认符合您情况的信息</view>
					<radio-group @change="radioChange">
						<view class="generation" v-for="(item,index) in claim_info" :key="index">	
							<view class="gener_box">
								<view class="call_name">爷爷：{{item.ft3_name}}</view>
								<view class="call_name">父亲：{{item.ft2_name}}</view>
								<view class="call_name">自己：{{item.name}}</view>
							</view>
							<radio :color="$themecolor" :value="item.name" :checked="index==current" />
						</view>
					</radio-group>
					<view v-if="claim_info.length==0" class="operation_title">暂未找到符合的信息，请重新填写</view>
					<view class="sub_footbtn">
						<view class="sub_button" @tap="afresh">重填</view>
						<view v-if="claim_info.length" class="sub_button" @tap="confirm">确认</view>
					</view>
				</view>
			</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	import { getUserinfo,authorWechat } from "@/utils/api/api.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	import {claimFamilyPeople} from "@/utils/api/zupu.js";
	export default{
		data(){
			return{
				photo_cdn,
				card_number:"",//激活卡的卡号
				people_id:'',
				current: 0, //单选框
				signal: 1, //弹窗显示  1是输入爷爷爸爸自己名字  2是选结果
				grandpa_name: '', //爷爷姓名
				parent_name: '', //父亲姓名
				name: '', //自己姓名
				claim_info: [],
				source_type:2,
				family_id:'',
				activation_code:'',
				area_obj:null,
				userInfo:null
			}
		},
		onLoad() {
			let token = uni.getStorageSync("token")
			if (!token) {
				uni.navigateTo({
					url:"/pagesim/center/login?type=1"
				})
				return ;
			}else{
				getUserinfo().then(res=>{
					if(res.code == 401){
						uni.navigateTo({
							url:"/pagesim/center/login?type=1"
						})
					}
				})
				
				this.getUserinfofun();
			}
		},
		methods:{
			async getUserinfofun() {
				let res  = await getUserinfo({
			
				})
				if(res.code==1){
					console.log(res.data.userinfo)
					this.userInfo = res.data.userinfo;
					uni.setStorageSync("u_userInfo", res.data.userinfo);
										
					this.area_obj = {
						province_id:res.data.userinfo.province_id,
						city_id:res.data.userinfo.city_id,
						area_id:res.data.userinfo.area_id,
						town_id:res.data.userinfo.town_id,
						village_id:res.data.userinfo.village_id,
					};
					
					if(res.data.userinfo.province_id == '' || res.data.userinfo.city_id == '' || res.data.userinfo.area_id == ''){
						uni.reLaunch({
							url:"/pages/mine/editinfo/editinfo?type=1"
						})
					}
					
				}
			},
			open(){
				if(this.activation_code){
					this.card_number = this.activation_code;//自动输入内容
				}
				
				// this.$refs.tree_popup.open();
			},
			//关闭弹窗
			closepups(){
				// this.$refs.tree_popup.close();
				setTimeout(()=>{
					this.signal=1;
					this.grandpa_name='';
					this.parent_name='';
					this.name='';	
				},500)	
			},
			//根据祖孙三代人的信息查询成员
			reference() {
				if(!this.grandpa_name){
					this.$api.msg('请输入爷爷姓名')
					return false;
				}
				if(!this.parent_name){
					this.$api.msg('请输入父亲姓名')
					return false;
				}
				if(!this.name){
					this.$api.msg('请输入您的姓名')
					return false;
				}
				
				let params = {
					grandpa_name: this.grandpa_name,
					parent_name: this.parent_name,
					name: this.name,
					
					type:this.source_type,//来源类型 
				}
				if(this.card_number){
					params.activation_code = this.card_number;//激活码
				}
				
				claimFamilyPeople({
					...params,
				}).then(res => {
					if (res.code == 1) {
						this.claim_info = res.data;
					}
					this.$api.msg(res.msg)
					setTimeout(() => {
						this.signal = 2
					}, 1000)
				})
			},
			radioChange(e) {
				for (let i = 0; i < this.claim_info.length; i++) {
					if (this.claim_info[i].name == e.detail.value) {
						this.current = i;
						break;
					}
				}	
			},
			//确认
			confirm(){
				this.people_id = this.claim_info[this.current].people_id
				console.log(this.people_id)
				
				let userinfo = uni.getStorageSync("userinfo");
				if(!userinfo.id){
					this.$api.msg("你还未登录!");
					return false;
				}
				
				let params = {
					people_id:this.people_id,
					fastim_id:userinfo.id,//id im
					
					type:this.source_type,//来源类型 
				}
				
				if(this.card_number){
					params.activation_code = this.card_number;//激活码
				}
				
				claimFamilyPeople({
					...params,
				}).then(res=>{
					if(res.code==1){
						
					}
					if(res.code==9999){
						this.$showModal({
							title:'提示',
							concent:`你还未缴费激活 是否激活?`,
							confirmVal:'确定',
							cancelVal:'取消',
						}).then(ress=>{
							uni.setStorageSync("jh_params",params)
							
							// this.$refs.tree_popup.close();
							this.signal = 1;
							
							//族谱id
							this.family_id = this.claim_info[this.current].family_id;
							
							
							// source=-1
							uni.navigateTo({
								url:`/pages/zupu/join_pay/join_pay?number=${res.data.number}&family_tree_id=0&family_id=${this.family_id}&source=-1`
							})
						}).catch(err=>{
							console.log(err)
							
							// this.$refs.tree_popup.close();
							this.signal = 1;
						})
					}else{
						this.$api.msg(res.msg);
						// setTimeout(()=>{
						// 	this.$refs.tree_popup.close();
						// 	this.signal = 1;
						// },1000)
					}
					
					
				})
			},
			//重填
			afresh(){
				setTimeout(()=>{
					this.signal = 1;
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	.tree_popup_view{
		
		// position: relative;
		// .closeicon{
		// 	position: absolute;
		// 	z-index: 9;
		// 	top: -70rpx;
		// 	right: -30rpx;
		// 	width: 70rpx;
		// 	height: 70rpx;
		// }
	}
	.operation{
		// background-color: #FFFFFF;
		padding: 65rpx 60rpx 50rpx 60rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.lable_cell_items{
			margin-bottom: 46rpx;
			.lable_names{
				color: $themecolor;
				font-size: 28rpx;
				font-weight: 800;
				line-height: 1;
			}
			.lable_input_view{
				margin-top: 26rpx;
				width: 400rpx;
				background: #FFFFFF;
				border: 2rpx solid $themecolor;
				border-radius: 12rpx;
			}
			.lable_input_tag{
				padding: 0 30rpx;
				height: 66rpx;
				line-height: 66rpx;
				box-sizing:border-box;
				font-size: 30rpx;
				color: #000000;
			}
			.lable_textarea_tag{
				width: 100%;
				padding: 30rpx;
				height: 320rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				box-sizing:border-box;
			}
		}
		.sub_footbtn{
			margin-top:30rpx;
			.sub_button{
				width: 400rpx;
				height: 86rpx;
				line-height: 86rpx;
				background: $themecolor;
				border-radius: 12rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}
	.operation_a{
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.operation_title{
			font-weight: bold;
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 28rpx;
		}
		.generation{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			.gener_box{
				padding: 15rpx;
				background-color: #FFFFFF;
				border: 1rpx solid $themecolor;
				border-radius: 10rpx;
				margin-right: 20rpx;
				.call_name{
					padding: 10rpx;
					background-color: $themecolor;
					color: #FFFFFF;
					margin-top: 10rpx;
					border-radius: 8rpx;
				}
				.call_name:nth-child(1){
					margin-top: 0;
				}
			}	
		}
		.generation:nth-child(1){
			margin-top: 0;
		}
		.sub_footbtn{
			width: 100%;
			margin-top:30rpx;
			display: flex;
			justify-content: space-evenly;
			.sub_button{
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: $themecolor;
				border-radius: 12rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}
	
	.index_heart_top{
		width: 100%;
		position: absolute;
		height: 290rpx;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;	
	}
	.index_heart_bottom{
		width: 100%;
		position: absolute;
		height: 290rpx;
		bottom: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;	
	}
</style>